<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>懒人年龄计算器</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #f8f9fa;
            font-family: 'Arial', sans-serif;
        }
        .container {
            margin-top: 50px;
            padding: 20px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .heading {
            font-size: 2.5rem;
            color: #333;
        }
        .form-label {
            font-weight: bold;
        }
        .btn-primary {
            background-color: #007bff;
            border: none;
        }
        .btn-primary:hover {
            background-color: #0056b3;
        }
        .result {
            font-size: 1.5rem;
            font-weight: bold;
            color: #28a745;
        }
        .error-message {
            font-size: 1.2rem;
            color: #dc3545;
        }
        .details p {
            font-size: 1.2rem;
        }
        .history-list {
            margin-top: 20px;
        }
        .history-item {
            background-color: #f8f9fa;
            padding: 10px;
            margin-bottom: 5px;
            border-radius: 5px;
        }

        .countdown {
            font-size: 1.5rem;
            font-weight: bold;
            color: #007bff;
            margin-top: 20px;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .heading {
                font-size: 2rem;
            }
            .form-label {
                font-size: 1rem;
            }
            .btn-primary {
                font-size: 1rem;
            }
            .result {
                font-size: 1.2rem;
            }
            .details p {
                font-size: 1rem;
            }
        }
    </style>
</head>
<body>

    <div class="container">
        <h1 class="heading text-center">懒人年龄计算器</h1>
        <p class="text-center">只需输入您的出生日期，我们将帮您计算您的年龄！</p>

        <form method="POST">
            <div class="mb-3 row">
                <div class="col-md-4">
                    <label for="birth_year" class="form-label">年份</label>
                    <input type="number" class="form-control" id="birth_year" name="birth_year" placeholder="年份" value="{{ request.form.get('birth_year') }}">
                </div>
                <div class="col-md-4">
                    <label for="birth_month" class="form-label">月份</label>
                    <input type="number" class="form-control" id="birth_month" name="birth_month" placeholder="月份" value="{{ request.form.get('birth_month') }}">
                </div>
                <div class="col-md-4">
                    <label for="birth_day" class="form-label">日期</label>
                    <input type="number" class="form-control" id="birth_day" name="birth_day" placeholder="日期" value="{{ request.form.get('birth_day') }}">
                </div>
            </div>
            <button type="submit" class="btn btn-primary w-100">计算年龄</button>
        </form>

        {% if age_detail %}
        <div class="mt-4 result text-center">
            <p>您的详细年龄信息：</p>
            <div class="details text-center">
                <p>岁数：{{ age_detail.years }} 年</p>
                <p>月数：{{ age_detail.months }} 月</p>
                <p>天数：{{ age_detail.days }} 天</p>
                <p>小时数：{{ age_detail.hours }} 小时</p>
                <p>分钟数：{{ age_detail.minutes }} 分钟</p>
            </div>

            {% if zodiac_sign %}
            <p>您的星座是：{{ zodiac_sign }}</p>
            {% endif %}

            <div id="countdown-container" class="countdown text-center">
                <p>距离下一个生日还有：</p>
                <p id="countdown-time"></p>
            </div>
        </div>
        {% endif %}

        {% if error_message %}
        <div class="mt-4 error-message text-center">
            <p>{{ error_message }}</p>
        </div>
        {% endif %}

        <div class="history-list">
            <h3>历史记录</h3>
            {% for item in history %}
            <div class="history-item">
                <p><strong>出生日期:</strong> {{ item.birth_date }}</p>
                <p><strong>年龄:</strong> {{ item.age }} 岁</p>
                <p><strong>星座:</strong> {{ item.zodiac }}</p>
                <p><strong>倒计时:</strong> {{ item.countdown }}</p>

                <!-- 删除按钮 -->
                <form action="{{ url_for('delete_history', history_id=loop.index0) }}" method="POST" style="display:inline;">
                    <button type="submit" class="btn btn-danger btn-sm">删除记录</button>
                </form>
            </div>
            {% endfor %}
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>

    <script>
        // 获取输入的出生日期
        const birthYear = {{ request.form.get('birth_year') }};
        const birthMonth = {{ request.form.get('birth_month') }};
        const birthDay = {{ request.form.get('birth_day') }};

        function updateCountdown() {
            const now = new Date();
            let nextBirthday = new Date(now.getFullYear(), birthMonth - 1, birthDay); // 下一个生日（年份为当前年）

            // 如果今年的生日已经过去了，设置为明年的生日
            if (nextBirthday < now) {
                nextBirthday.setFullYear(now.getFullYear() + 1);
            }

            const timeDiff = nextBirthday - now;
            const days = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
            const hours = Math.floor((timeDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((timeDiff % (1000 * 60)) / 1000);

            const countdownText = `${days} 天 ${hours} 小时 ${minutes} 分钟 ${seconds} 秒`;
            document.getElementById('countdown-time').textContent = countdownText;
        }

        // 每秒更新倒计时
        setInterval(updateCountdown, 1000);
    </script>

</body>
</html>
